<!--
  *@Description : 设置组件
  *@author 萧红
  *@date 2020-03-23 23:55
  *@LastEditTime 2020-03-23 23:55
  *@LastEdititors
-->
<template>
    <div id="setting">
      <Tittle :title="'设置'" :show-back="1"></Tittle>
      <div :style="{height:$inerHeight - 40 + 'px'}">
        <div class="memo">
          <div class="memo-item">
            <div class="item-text">
              <div class="item-label">账户和安全</div>
              <div class="btn-icon">
                <i class="cubeic-arrow"></i>
              </div>
            </div>
          </div>
          <div class="memo-item">
            <div class="item-text">
              <div class="item-label">黑名单</div>
              <div class="btn-icon">
                <i class="cubeic-arrow"></i>
              </div>
            </div>
          </div>
          <div class="memo-item">
            <div class="item-text">
              <div class="item-label">隐私管理</div>
              <div class="btn-icon">
                <i class="cubeic-arrow"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="memo">
          <div class="memo-item">
            <div class="item-text">
              <div class="item-label">处罚公示</div>
              <div class="btn-icon">
                <i class="cubeic-arrow"></i>
              </div>
            </div>
          </div>
          <div class="memo-item">
            <div class="item-text">
              <div class="item-label">cos客服</div>
              <div class="btn-icon">
                <i class="cubeic-arrow"></i>
              </div>
            </div>
          </div>
          <div class="memo-item">
            <div class="item-text">
              <div class="item-label">关于我们</div>
              <div class="btn-icon">
                <i class="cubeic-arrow"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="btn" @click="logout">退出登录</div>
      </div>
    </div>
</template>

<script>
import Tittle from '../../components/Tittle'
export default {
  name: 'Setting',
  components: {
    Tittle
  },
  methods: {
    logout () {
      // 请求后台一次，将后台的uid清空
      this.apis.loginout().then((res) => {
        if (res.code === 200) {
        } else {
          this.$toast('登出失败')
        }
      }).then(() => {
        localStorage.clear() // 移除本地厂库的所有信息
        this.$toast('正在登出', 'loading', 1000)
        let timeout = setTimeout(() => {
          clearTimeout(timeout)
          localStorage.removeItem('userId')
          this.$router.push('/login')
        }, 1000)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../node_modules/stylus-px2rem"
#setting
{
  .memo
  {
    display flex
    flex-flow column nowrap
    justify-content flex-start
    border-bottom 3px solid #f0f0f0
    .memo-item
    {
      display flex
      flex-flow row nowrap
      justify-content flex-start
      padding 2px 5px
      font-size 7px
      align-items center
      .item-text
      {
        width 100%
        display flex
        flex-flow row nowrap
        justify-content space-around
        line-height 21px
        border-bottom 1px solid #f0f0f0
        .item-label
        {
          width 90%
          text-align left
        }
        .btn-icon
        {
          width: 10%
          position relative
          i
          {
            position absolute
            top: 0
            right 0
          }
        }
      }
    }
  }
  .btn
  {
    width:90%
    margin 0 auto
    line-height: 0.9375rem;
    height: 0.9375rem;
    color: #fffafa;
    position: relative;
    top: 0.625rem;
    border-radius: 1.25rem;
    background-color: #fd88fa;
    background-image: linear-gradient(90deg, #ffbdd3 0%, #f69 100%);
  }
}
</style>
